<div ng-controller="UI.UITestController2">

  <div>
    <div class="row-fluid">
      <h3>Auto Columns</h3>
      <p>Lays out a bunch of inline-block child elements into columns automatically based on the size of the parent container.  Specify the selector for the child items as an argument</p>

      <script type="text/ng-template" id="autoColumnTemplate">
<div id="container"
     style="height: 225px;
            width: 785px;
            background: lightgrey;
            border-radius: 4px;"
     hawtio-auto-columns=".ex-children"
     min-margin="5">
  <div class="ex-children"
       style="display: inline-block;
              width: 64px; height: 64px;
              border-radius: 4px;
              background: lightgreen;
              text-align: center;
              vertical-align: middle;
              margin: 5px;"
       ng-repeat="div in divs">{{div}}</div>
</div>
      </script>
      <div hawtio-editor="autoColumnEx" mode="fileUploadExMode"></div>
      <div class="directive-example">
        <div compile="autoColumnEx"></div>
      </div>
    </div>
  </div>
</div>
